<template>
    <div>
        <el-card>
            <div slot="header">
                <span>结算</span>
            </div>
            <div>
                <el-form ref="form" :model="payoffForm" label-width="600px">
                    <el-form-item label="订单编号: ">
                        <span>
                            ORS{{ payoffInfo.orderId }}20
                        </span>
                    </el-form-item>
                    <el-form-item label="原价: ">
                        <span>
                            {{ payoffInfo.payoffOriginalPrice }} 元
                        </span>
                    </el-form-item>
                    <el-form-item label="优惠券: ">
                        <el-select @change="couponChange" v-model="currentCoupon" value-key="key" clearable placeholder="请选择">
                            <el-option v-for="item in coupons"
                                    :key="item.key"
                                    :label="item.name + ' -' + item.money + '元'"
                                    :value="item">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="应付金额: ">
                        <span>
                            {{ payoffInfo.payoffMoney }} 元
                        </span>
                    </el-form-item>
                    <el-form-item>
                        <el-button style="margin-left: 80px" type="primary" @click="targetPay">去支付</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </el-card>
    </div>
</template>

<script>
    import $ from "jquery"
    export default {
        name: "Payoff",
        data() {
            return {
                // 结算信息
                payoffInfo: {},
                // 结算表单
                payoffForm: {
                    // 订单ID
                    "orderId": this.$route.params.orderId,
                    "coupon.name": null,
                    "coupon.money": null,
                    "coupon.description": null,
                    "coupon.key": null,
                    "payoffMoney": null
                },
                // 当前使用优惠券
                currentCoupon: {},
                value: "1",
                // 所以优惠券
                coupons: []
            }
        },
        mounted() {
            this.getPayoffInfo();
            this.listCoupons();
        },
        methods: {
            // 获取所有优惠券
            listCoupons() {
                let that = this;
                $.ajax({
                    url: IP_ADDR + "user/getUserCoupons",
                    headers: {
                        "Access-Token": sessionStorage.getItem(ACCESS_TOKEN)
                    },
                    success(r) {
                        that.coupons = r.res;
                    },
                    error(r) {
                        console.log(r.responseJSON.message);
                    }
                });
            },
            // 获取订单结算信息
            getPayoffInfo() {
                let that = this;
                $.ajax({
                    url: IP_ADDR + "order/getPayoffInfo",
                    headers: {
                        "Access-Token": sessionStorage.getItem(ACCESS_TOKEN)
                    },
                    data: that.payoffForm,
                    success(r) {
                        that.payoffInfo = r.res;
                    },
                    error(r) {
                        that.$message.error(r.responseJSON.message);
                    }
                });
            },
            // 跳转支付页面
            targetPay() {
                let that = this;
                this.payoffForm.payoffMoney = this.payoffInfo.payoffMoney;
                // 生成结算信息
                $.ajax({
                    url: IP_ADDR + "order/savePayoff",
                    type: "POST",
                    headers: {
                        "Access-Token": sessionStorage.getItem(ACCESS_TOKEN)
                    },
                    data: that.payoffForm,
                    success(r) {
                        // 跳转到支付页面
                        that.$router.push("/pay" + that.payoffForm.payoffMoney + that.payoffForm.orderId + "/" + r.res);
                    },
                    error(r) {
                        that.$message.error(r.responseJSON.message);
                    }
                });
            },
            // 优惠券改变
            couponChange(e) {
                this.payoffForm["coupon.key"] = e.key
                this.payoffForm["coupon.money"] = e.money
                this.payoffForm["coupon.description"] = e.description
                this.payoffForm["coupon.name"] = e.name
                this.getPayoffInfo();
            }
        }
    }
</script>

<style scoped>

</style>